<!--
 * @Author: fanyaqing
 * @Date: 2021-08-15 17:47:22
 * @LastEditTime: 2021-08-16 17:24:34
 * @LastEditors: fanyaqing
 * @Description: 
 * @FilePath: \supermall\src\views\shopcart\childComponents\CartBottomBar.vue
-->
<template>
  <div class="bottom-bar">
    <div class="check-content">
      <CheckButton
        class="check-buttom"
        :class="{checked:isSelectAll}"
        @click.native="selectAllClick"
      ></CheckButton>
      <span>全选</span>
    </div>
    <div class="price">
      合计：{{totalPrice}}
    </div>
    <div class="calculate" @click="calcClick">
      去计算：（{{cartCount}}）
    </div>
  </div>
</template>
<script>
import CheckButton from './CheckButton'
import {mapGetters} from 'vuex'
export default {
  components:{
    CheckButton
  },
  computed:{
    ...mapGetters(['cartList']),
    totalPrice(){
      const cartList=this.$store.getters.cartList;
      return cartList.filter(item=>{
        return item.checked
      }).reduce((preValue,item)=>{
        return preValue+item.count*item.price
      },0).toFixed(2)
    },
    cartCount(){
      const cartList=this.$store.getters.cartList;
      return cartList.filter(item=>{
        return item.checked
      }).length
    },
    isSelectAll(){
      if(this.cartList.length===0) return false;
  
      // return !(this.cartList.filter(item=> !item.checked).length)
      return !this.cartList.find(item=> !item.checked)
    },
  },
  methods:{
    selectAllClick(){
      // 全选按钮点击
      // const noChecked=this.cartList.filter(item=> !item.checked)
      // if(noChecked.length===0){
      //   this.cartList.forEach(item=>{
      //     item.checked=!item.checked
      //   })
      // }else{
      //   noChecked.forEach(element => {
      //     element.checked=true
      //   });
      // }
      
      if (this.isSelectAll) {//全部选中
        this.cartList.forEach(element => {
          element.checked=false
        });
        
      } else {//部分选中或者不选中
        this.cartList.forEach(element=>[
          element.checked=true
        ])
      }
    },
    calcClick(){
      const isChecked=this.cartList.find(item=> item.checked==true)
      if(!isChecked){
        this.$toast.show('请选择购买的商品')
      }
    }
  }
}
</script>
<style scoped>
  .bottom-bar{
    line-height: 40px;
    height: 40px;
    position: absolute;
    bottom: 49px;
    left: 0;
    right: 0;
    background-color: #eee;

    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  .check-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
  .check-buttom{
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
  }
  .checked{
    border: 2px solid red;
    background-color: red;
  }
  .price{
    flex: 1;
  }
  .calculate{
    background-color: orange;
    color: #fff;
    text-align: center;
    flex: 1;
  
  }
</style>